<template>
    <div class="announcement-container">
        <h1>发布公告</h1>
        <el-form ref="announcementForm" :model="announcementForm" label-width="100px" class="announcement-form">
            <el-form-item label="公告标题" prop="title" :rules="[{ required: true, message: '请输入公告标题', trigger: 'blur' }]">
                <el-input v-model="announcementForm.title" placeholder="请输入公告标题"></el-input>
            </el-form-item>

            <el-form-item label="公告内容" prop="content" :rules="[{ required: true, message: '请输入公告内容', trigger: 'blur' }]">
                <el-input type="textarea" v-model="announcementForm.content" placeholder="请输入公告内容" rows="5"></el-input>
            </el-form-item>

            <el-form-item label="发布日期" prop="createTime" :rules="[{ required: true, message: '请选择发布日期', trigger: 'change' }]">
                <el-date-picker v-model="announcementForm.createTime" type="date" placeholder="选择发布日期"></el-date-picker>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="announcementForm.status" active-text="发布" inactive-text="草稿"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitAnnouncement">发布公告</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            announcementForm: {
                title: '',
                content: '',
                createTime: '',
                status: false // false for draft, true for published
            }
        };
    },
    methods: {
        submitAnnouncement() {
            this.$refs.announcementForm.validate((valid) => {
                if (valid) {
                    console.log('公告已发布:', this.announcementForm);
                    this.$http.post("/notice/notice/createByShopIdNotice", this.announcementForm).then(resp => {
                        if (resp.data.success) {
                            this.$message(resp.data.message);
                            this.resetForm();
                        } else {
                            this.$message(resp.data.message);
                        }
                    }).catch(error => {
                        console.error('请求失败:', error);
                        this.$message.error('发布失败，请重试');
                    });
                } else {
                    console.error('表单验证失败');
                }
            });
        },
        resetForm() {
            this.announcementForm = {
                title: '',
                content: '',
                date: '',
                status: false
            };
            this.$refs.announcementForm.resetFields();
        }
    }
};
</script>

<style scoped>
.announcement-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

h1 {
    text-align: center;
    color: #333;
}

.announcement-form {
    margin-top: 20px;
}
</style>